<template>
    <div class="addCourse">
        <el-form label-width="200px" :model="addCourse">
            <!-- 基础信息 -->
            <div class="baseInfo">
                <el-tag>基础信息</el-tag>
                <el-form-item label="课程名称 :" prop="courseName" class="addCourse-first">
                    <el-input v-model="addCourse.courseName" placeholder="请输入" clearable size="large" />
                </el-form-item>
                <el-form-item label="课程年级 :" prop="courseGrade">
                    <el-select v-model="addCourse.courseGrade" placeholder="请选择" size="large">
                        <el-option v-for="item in gradeList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="课程分类 :" prop="courseCate">
                    <el-select v-model="addCourse.courseCate" placeholder="请选择" size="large">
                        <el-option v-for="item in curriculumCateOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="主讲老师 :" prop="courseTeacher">
                    <el-select v-model="addCourse.courseTeacher" placeholder="请选择" size="large">
                        <el-option v-for="item in teacherList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="课程价格 :" prop="coursePrice" class="input-price">
                    <el-input v-model="addCourse.coursePrice" placeholder="请输入" clearable size="large" style="width: 80px;"/>
                    <span class="yuan">元</span>
                </el-form-item>

                <el-form-item label="账号状态 :">
                    <el-radio-group v-model="addCourse.courseSelected">
                        <el-radio label="按天" />
                        <el-radio label="按月" />
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="课程封面 :" prop="courseImg">
                    <el-upload v-model:file-list="fileList">
                        <el-button type="default" style="margin-left: 40px;" :icon="Upload" disabled>点击上传</el-button>
                        <template #tip>
                            <div class="el-upload__tip">
                                文件扩展名:.jpg .png ...
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </div>

            <!-- 课程目录 -->
            <div class="courseCatalogue">
                <el-tag>课程目录</el-tag>
                <!-- 课程表格数据 -->
                <el-table :data="catalogueData" :border="true" style="width: 80%;" class="curriculum-data"
                    :table-layout="tableLayout" :header-cell-style="{
                        background: '#ecf7ff',
                        color: '#666666',
                        fontWeight: '600',
                        fontSize: '16px',
                    }" :cell-style="cellStyle">
                    <el-table-column prop="catalogueDate" label="序号" />
                    <el-table-column prop="catalogueName" label="目录名称" />
                    <el-table-column prop="catalogueStatu" label="开课状态" />
                    <el-table-column prop="catalogueTime" label="开课时间" />
                    <el-table-column prop="catalogueOperation" label="操作">
                        <template #default="{ row }">
                            <el-button type="primary" :icon="Edit" circle disabled />
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bothBtn">
                    <el-button type="primary" class="sureBtn" text @click="dialogFormVisible = true">
                        添加目录</el-button>
                </div>
            </div>

            <!-- 添加目录弹出框 -->
            <el-dialog v-model="dialogFormVisible" title="添加目录" style="width: 500px;">
                <el-form :model="form" :rules="rules" prop="catalogueName">
                    <el-form-item label="目录名称 :" :label-width="formLabelWidth" prop="catalogueName">
                        <el-input v-model="form.catalogueName" autocomplete="off" placeholder="请输入"
                            style="margin-left: 0px;width: 200px;" />
                    </el-form-item>
                    <el-form-item label="开课时间 :" :label-width="formLabelWidth" prop="DateValue">
                        <el-date-picker v-model="form.DateValue" type="date" placeholder="请选择日期" />
                    </el-form-item>

                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button type="primary" @click="dialogFormVisible = false"> 确认</el-button>
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                    </span>
                </template>
            </el-dialog>

            <!-- 课程详情 -->
            <div class="courseDetail">
                <el-tag>课程详情</el-tag>
                <el-form-item label="课程详情 :" class="detailInput" props="textarea">
                    <el-input type="textarea" v-model="addCourse.textarea" placeholder="最多500个字" class="inputText"
                        show-word-limit maxlength="500" :rows="10"></el-input>
                </el-form-item>
            </div>

            <el-form-item class="buttonStyle">
                <el-button type="primary" class="sureBtn" @click="sureBtnAdd()">
                    确认
                </el-button>
                <el-button type="default">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref, computed, onMounted } from 'vue'
import { Upload, Edit } from '@element-plus/icons-vue';
import { getCourse, getTeacherList } from '../../../api/user';
import { courseAdd } from '../../../api/adds';
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs';

const curriculumData = ref([])
const teacherList = ref([])
// 弹出框
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

// 表格宽度自适应  
const tableLayout = ref('auto')

const form = reactive({
    catalogueName: '',
    DateValue: ''
})

const rules = reactive({
    catalogueName: [
        { required: true, message: '请输入目录名称', trigger: 'blur' },
        { min: 3, max: 5, message: '字符长度2-5', trigger: 'blur' },
    ],
    DateValue: [
        { required: true, message: '请选择日期', trigger: 'blur' },
    ]

})

// 表单初始数据
const addCourse = reactive({
    courseName: '小学数学速成教程第一版',   // 课程名称
    courseGrade: '小学',  // 课程年级
    courseCate: '数学',    // 课程分类
    courseTeacher: "",  // 主讲老师
    coursePrice: '168',   // 课程价格
    courseSelected: '按天', // 课程方式
    courseImg: '',   // 课程封面

    textarea: '点燃一盏心灯，退守在方寸之间，在天之涯处浅写守望，一任声声覆声声的呼喊，沿着思念的脉络疯长。今生刻骨铭心的温馨与记忆，凝重成胸口赤色的朱砂，蘸就幽幽执情的墨香，细细勾画，把今生最美的爱恋用真情填满温润的诗行……\n\n今生，风烟流年，执手红尘，朝朝暮暮，凝字为爱。两相依，如花眷恋，你是我独守的暖，不相负，繁华唇语缠绵。那日，长空阴晦，如我的心情。踩着碎碎的感伤，两眼含霜，有风吹过，寒依然。闭上眼帘，记不起你完整的笑容，千年红尘，就在这一刻泛起绵绵情愁，我的世界开始下雪。' // 课程详情textarea

})

// 课程目录数据
const catalogueData = ref([
    {
        catalogueDate: '01', // 序号
        catalogueName: '小学数学速成教程第一版',  // 目录名称
        catalogueStatu: '未开课',  // 开课状态
        catalogueTime: '2023-02-12 17:50',  // 开课时间
    }
])

// 年级数据
const gradeList = ref([
    {
        value: '小学',
        label: '小学',
    },
    {
        value: '初中',
        label: '初中',
    },
    {
        value: '高中',
        label: '高中',
    },
])

// 封面上传
const fileList = ref([
    {
        name: 'course.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    }
])

// 蓝色字体
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
    if (column.label === '开课状态') {
        return {
            color: '#1485fe'
        }
    }
}

const fetchData = async () => {
    curriculumData.value = await getCourse()
    teacherList.value = await getTeacherList()
}

// 课程分类
const curriculumCateOptions = computed(() => {
    let temp = []
    curriculumData.value?.forEach((item) => {
        if (temp.findIndex((abc) => abc.label == item.curriculumCate) != -1) return
        temp.push(
            {
                value: temp.length + 1,
                label: item.curriculumCate,
            }
        )
    })
    return temp
})

const sureBtnAdd = async () => {
    await courseAdd({
        "curriculumName": addCourse.courseName,
        "curriculumShowStatu": true,
        "curriculumStatu": 1,
        "curriculumCate": addCourse.courseCate,
        "curriculumPhoto": "https://img02.mockplus.cn/image/2021-08-26/b0b3f9e0-0609-11ec-b17e-dde659633d95.png",
        "curriculumTeacher": addCourse.courseTeacher,
        "curriculumGrade": addCourse.courseGrade,
        "curriculumTime": addCourse.courseSelected,
        "curriculumPrice": addCourse.coursePrice,
        "curriculumStart": dayjs().add(7, 'day').unix(),
        "curriculumCreateTime": dayjs().unix(),
        "textarea": addCourse.textarea
    })

    ElMessage({
        message: "添加成功，可在'课程管理'内查看",
        type: 'success',
    })
}

onMounted(() => {
    fetchData()
})

</script>
<style lang="scss" scoped>
.addCourse {
    padding: 50px 50px 0 50px;
    box-sizing: border-box;
    background-color: #fff;
}

:deep(.el-form) {
    display: flex;
    flex-direction: column;
    padding: 30px;
}

.el-input {
    width: 300px;
    margin-left: 40px;
}

.el-select,
.el-radio-group {
    margin-left: 40px;
}

.baseInfo,
.courseCatalogue,
.courseDetail {
    border-top: 1px solid #e4f1ff;
}

:deep(.addCourse-first) {
    margin-top: 20px;
}

.el-upload__tip {
    margin-left: 40px;
}

.yuan {
    margin-left: 5px;
}

:deep(.el-table .el-table__cell) {
    text-align: center;
}

.bothBtn {
    margin: 30px 30px 30px 60px;
}

.el-table {

    margin: 30px 60px 30px 60px;
}

.inputText {
    width: 60%;
}

.detailInput {
    margin-top: 30px;
}

.sureBtn {
    width: 100px;
}

.el-button--text {
    margin-right: 15px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>